<template>
    <n-space vertical style="width: 1200px; margin-left: 20%;">
        <n-tabs
            default-value="questionDescription"
            type="line"
            justify-content="space-evenly"
            size="large"
            style="margin-top: 0.5%"
        >
            <n-tab-pane name="questionDescription" tab="题目描述">
                <v-md-preview :text="text" />
            </n-tab-pane>
        </n-tabs>
        <code-area :questionid="questionID"></code-area>
    </n-space>
</template>



<script lang="ts">
import { NTabs, NTabPane } from "naive-ui";
import { defineComponent, ref } from "vue";
import CodeArea from "@/components/question/CodeArea.vue";
import { toGetQuestion } from "@/utils/Questions";


export default defineComponent({
    components: { NTabPane, NTabs, CodeArea },
    created(){
        this.setQuestionText();
    },
    setup() {
        return {
            text: ref(""),
            questionID: 0
        }
    },
    methods: {
        async setQuestionText(){
            const data = await toGetQuestion(String(this.$route.params.questionName));
            if (data){
                this.text = data.description;
                this.questionID = data.question_id;
            }
        }
    }
})
</script>